Style start/end node components #202
Conversation
Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>
✅ Deploy Preview for swf-editor ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This PR replaces the placeholder Start/End React Flow nodes with a dedicated StartEndNode component and introduces corresponding CSS to render Mermaid-style start (single circle) and end (double circle) markers in the workflow diagram editor.
Changes:
- Added a shared
StartEndNoderenderer and wired it intoStartNode/EndNode. - Added new CSS classes for start/end node shapes, plus selected/hover styling.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
| packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx | Adds StartEndNode and updates Start/End node components to render it. |
| packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css | Adds styling for the new start/end node shapes and their interaction states. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
@kumaradityaraj I know not ready for review but I know I mentioned the grey like the edge but looks a bit off next to diagram, can you try the same colours as what we style the entry/exit nodes for light and dark themes please |
Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>
Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>
Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>
Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>
|
@lornakelly @fantonangeli @handreyrc Please review this PR. Special attention to colour of the node must be verified as mentioned by Lorna in the above comment. |
kumaradityaraj
requested review from
cheryl7114,
fantonangeli,
handreyrc and
lornakelly
|
@kumaradityaraj It doesnt look like the colours are updated to match entry/exit nodes? Once that is done I will review rest of PR, thanks |
Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>
Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>
| @apply dec:border-slate-600 | ||
| dec:bg-slate-800; |
| .dec-start-end-node { | ||
| position: relative; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; |
|
|
||
| // TODO: This content is just a placeholder | ||
| function PlaceholderContent({ id, data, selected, type }: PlaceholderProps) { | ||
| function StartEndNode({ id, data, selected, type }: NodeContentProps) { |
| // TODO: This component is just a placeholder | ||
| return <PlaceholderContent id={id} data={data} selected={selected} type={type} />; | ||
| return <StartEndNode id={id} data={data} selected={selected} type={type} />; |
| // TODO: This component is just a placeholder | ||
| return <PlaceholderContent id={id} data={data} selected={selected} type={type} />; | ||
| return <StartEndNode id={id} data={data} selected={selected} type={type} />; |
Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>
|
|
|
||
| /* end validation errors */ | ||
|
|
||
| .dec-start-end-node { |
There was a problem hiding this comment.
You need to scope these styles under dec-root (you have done for dark mode)
| position: relative; | ||
|
|
||
| @apply dec:border | ||
| dec:border-slate-300 |
There was a problem hiding this comment.
its a bit too light on light mode, can you try border colour slate-400
|
|
||
| // TODO: This content is just a placeholder | ||
| function PlaceholderContent({ id, data, selected, type }: PlaceholderProps) { | ||
| function StartEndNode({ id, data, selected, type }: NodeContentProps) { |
There was a problem hiding this comment.
doesnt look like data prop is used? if not please remove
| const isStart = type === GraphNodeType.Start; | ||
| return ( | ||
| <div | ||
| className={`custom-node-container ${selected ? "selected" : ""}`} |
There was a problem hiding this comment.
can you also remove the css styles for the placeholder component
|
@kumaradityaraj can you also make these nodes not selectable, as there is no info to display, similar to entry/exit nodes. There is a line in |
|
@kumaradityaraj please also run |
Closes
Style Start and End Nodes and Verify Edge Connectivity
Summary
This PR applies the finalized styling for the custom Start and End workflow nodes and validates their connectivity within the editor. The implementation aligns with the agreed design, providing clear visual indicators for workflow entry and exit points.
Changes
Screenshots